<script lang="ts" setup>
import laudIcon from "@/components/icon/LaudIcon.vue";
import ShareIcon from "@/components/icon/ShareIcon.vue";
import AuthorFocus from "@/components/icon/AuthorFocus.vue";
import { authorStoriesStore, homeStoriesStore } from "../../store";
import { onMounted, ref, computed } from "vue";
import { Api } from "@/apis";
import { storeToRefs } from "pinia";
import { DiscoverAuthorDetailType } from "@/typing";
import { titleTypes } from "@/datas";

import { useRouter, useRoute } from "vue-router";

const authorStore = authorStoriesStore();
const { authorData } = storeToRefs(authorStore);

const store = homeStoriesStore();
const { updateIsDiscoverShow,updateArticle } = store;

const router = useRouter()
const route = useRoute()
const authorDetail = ref<any>(null);
let scorll = ref<number>(0);

const authorId = ref(0);
authorId.value = Number(route.query.id);
let authorList = ref<Array<DiscoverAuthorDetailType>>([]);

onMounted(async () => {
    const { data } = await Api.getAuthorDetailList(authorId.value);
    authorList.value = data.data;
})

function goBackFunc() {
    updateIsDiscoverShow(false);
    router.push({ name: 'discover' })
}

const headOpacity = computed(() => {
    let o = (scorll.value / 1000);
    o = o >= 1 ? 1 : o;
    return o;
})

const headColor = computed(() => {
    return `rgba(255,255,255,${headOpacity.value})`;
})

const textColor = computed(() => {
    return `rgba(0,0,0,${headOpacity.value})`;
})

function scrollhandle() {
    scorll.value = Number(authorDetail.value.scrollTop);
}

function goToArticleDetail(id: string, category: string, title: string) {
    updateArticle(id, category, title);

    router.push({
        name: 'article-detail'
    })
}

</script>

<template>
    <div class=" h-screen  overflow-auto bg-gray-100 pb-32" ref="authorDetail" @scroll.passive="scrollhandle">
        <div class="fixed top-0 left-5 flex items-center py-5 w-screen h-20" :style="{ backgroundColor: headColor }">
            <img class="w-6 h-10" src="@/assets/card/h5_qr_back.png" alt="back" @click="goBackFunc" />
            <div class="w-10/12 text-center" :style="{ color: textColor }">{{ authorData?.user_name }}</div>
        </div>
        <div>
            <div class="text-center py-8 bg-white mb-8">
                <img class="w-32 rounded-full img-left" :src="authorData?.web_url" alt="img">
                <div class="text-3xl my-5">{{ authorData?.user_name }}</div>
                <div>{{ authorData?.desc }}</div>
                <AuthorFocus v-if="authorData" :type="1" :list="authorData" />

                <div class="text-gray-400 ">{{ authorData?.fans_total }} 关注</div>
            </div>
            <div v-for="(l, i) in authorList" :key="i">
                <div class="p-8 bg-white" @click="goToArticleDetail(l.item_id, l.category, l.title)">
                    <div class="text-center text-gray-400 mb-6">- {{ titleTypes[l.category] }} -</div>
                    <div class="text-3xl">{{ l.title }}</div>
                    <div class="text-gray-400 my-3">{{ l.author.user_name }}</div>
                    <div class="text-gray-500 my-5">{{ l.forward }}</div>
                    <img class="rounded-2xl" :src="l.img_url" alt="img">
                    <div class="flex justify-end items-center pt-8 pr-3">
                        <laudIcon :countNum="l.like_count" />
                        <div class="ml-14">
                            <ShareIcon :type="0" :shareList="l.share_list" />
                        </div>

                    </div>
                </div>
                <div class="bg-gray-100 h-5"></div>
            </div>
        </div>
    </div>
</template>

<style>
.img-left {
    margin-left: 155px;
}
</style>

